<template>
	<view class="mine">
		<view class="header">
			<uni-list :border="false">
				<uni-list-item :link="!is_customer" :clickable="!is_customer" @click="toEdit">
					<template v-slot:body>
						<view class="userInfo">
							<view class="avatar-box">
								<image mode="aspectFill" :src="avatarUrl ? avatarUrl : getDefaultImage()"
									@error="avatarUrl = getDefaultImage()" />
							</view>
							<text class="username">{{username || '微信用户'}}</text>
							<text class="channel">渠道: {{channel}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list />
		</view>
		<view class="navigator-group">
			<uni-list>
				<uni-list-item title="报价记录" link to="/pages/quotationRecord/quotationRecord"></uni-list-item>
				<uni-list-item title="公司产品" link to="/pages/productList/productList"></uni-list-item>
			</uni-list>
		</view>
		<view class="logout-btn" @click="logout">
			<text>退出登录</text>
		</view>
		<custom-tab-bar ref="customTabBarRef"></custom-tab-bar>
	</view>
</template>

<script>
	import {
		userInfo,
		userAuth,
	} from "@/api/search_read.js";
	import customTabBar from "@/wxcomponents/custom-tab-bar";
	import _ from "lodash";
	export default {
		components: {
			customTabBar,
		},
		data() {
			return {
				// 头像
				avatarUrl: '',
				// 用户名
				username: '',
				// 渠道
				channel: '',
			}
		},
		computed: {
			is_customer() {
				return getApp().globalData.is_customer;
			},
		},
		onShow() {
			userAuth().then(res => {
				if (res.data.result?.length >= 1) {
					let obj = res?.data?.result?.records?.[0] || {};
					getApp().globalData.is_customer = obj?.enable_mobile_customer || false;
					if (obj?.enable_mobile_customer) {
						this.avatarUrl = obj?.avatar_256 ? this.image_base64(obj.avatar_256) : '';
						this.username = obj?.name || '微信用户';
						const company = obj?.company_id?.[1] || '';
						this.channel = `${company}`;
					} else {
						this.getInfo();
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '未获取到用户信息',
					})
				}
			}).catch(() => {
				uni.showToast({
					icon: 'none',
					title: '系统错误',
				})
			}).finally(() => {
				this.$nextTick(() => {
					this.$refs.customTabBarRef.setData({
						is_customer: getApp().globalData.is_customer,
					})
				})
			})
			this.$nextTick(() => {
				this.$refs.customTabBarRef.setData({
					selected: 'mine',
				})
			})
		},
		methods: {
			// 获取信息
			getInfo() {
				userInfo().then(res => {
					if (res.data.result?.length >= 1) {
						const info = res.data?.result?.records?.[0];
						this.avatarUrl = info?.avatar_256 ? this.image_base64(info.avatar_256) : '';
						this.username = info?.name || '微信用户';
						const company = info?.company_id?.[1] || '';
						const department = info?.department_id?.[1] || '';
						this.channel = `${company}(${department})`;
					} else {
						uni.showToast({
							icon: 'none',
							title: '未获取到用户信息',
						})
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统错误',
					})
				})
			},
			image_base64(photo) {
				return 'data:image/jpeg;base64,' + photo;
			},
			// 默认头像
			getDefaultImage() {
				return require("@/static/image/avatar-default.png");
			},
			// 跳转编辑
			toEdit: _.debounce(function() {
				if (getApp().globalData.is_customer) {
					return;
				}
				uni.navigateTo({
					url: '/pages/personalEdit/personalEdit',
				})
			}, 300),
			// 退出登录
			logout: _.debounce(function() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					success: (e) => {
						if (e.confirm) {
							this.$store.dispatch("logout");
							uni.reLaunch({
								url: '/pages/login/login',
							})
						}
					}
				})
			}, 300),
		},
	}
</script>

<style lang="scss" scoped>
	.mine {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: calc(50px + env(safe-area-inset-bottom));
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			width: 100%;

			.userInfo {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 48rpx 0;

				.avatar-box {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100rpx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.username {
					font-size: 46rpx;
					margin-top: 42rpx;
					color: #34353A;
					line-height: 1;
				}

				.channel {
					font-size: 28rpx;
					color: #B1B0B3;
					line-height: 1;
					margin-top: 24rpx;
				}
			}
		}

		.navigator-group {
			width: 100%;
		}

		.logout-btn {
			margin: auto 0 134rpx;
			width: 380rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background-color: #DDDCDE;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: white;

			&:active {
				opacity: .7;
			}
		}
	}
</style>